<template>
  <view class="hot-cities dark">
    <view class="hot-cities-title">
      <i class="iconfont icon-fire icon-fire-box"></i>
      <text>热门城市</text>
    </view>
    <view class="hot-cities-list">
      <view
        v-for="city in hotCities"
        :key="city"
        class="hot-city-item"
        @click="selectCity(city)"
      >
        {{ city }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    name: "HotCities",
    data() {
      return {
        hotCities: [
          "北京",
          "上海",
          "广州",
          "深圳",
          "杭州",
          "成都",
          "重庆",
          "武汉",
        ],
      };
    },
    methods: {
      selectCity(city) {
        this.$emit("city-selected", city);
      },
    },
  };
</script>

<style>
  .icon-fire-box {
    font-size: 18px;
    color: #ff0000;
    margin-right: 5px;
  }
  .hot-cities {
    padding: 15px;
    margin-top: 10px;
  }

  .hot-cities-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;
    color: #f0f0f0;
  }

  .hot-cities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hot-city-item {
    background-color: #8d8d8d63;
    color: #f0f0f0;
    padding: 8px 15px;
    border-radius: 15px;
    cursor: pointer;
  }

  .hot-city-item:hover {
    background-color: #6d6d6d63;
  }
</style>
